<template>
	<view class="content">
		<view  class="item" v-for="(item, index) in list" 
			:key="index" @click="clickItem(item,index)" 
			:class="curIndex == index ? 'active' : ''">
			<view class="item-info">
				<view class="img-box">
					<image class="img" :src="item.img ? item.img : goodsImg" mode="aspectFill"></image>
					<view class="not-sale-txt" v-if="item.onsale != 1">{{notSaleTxt}}</view>
				</view>
				<view class="gd-info">
					<view class="gd-tit">{{item.gdname}}</view>
					<view class="gd-s-u" v-if="item.discount_r < 100">折扣: <text class="g-s-u-r">{{item.discount_r}}%</text>  折后价: <text class="g-s-u-p">{{item.price}}</text></view>
					<view class="gd-s-u">{{item.spec_title ? item.spec_title : ""}}{{item.unit_title ? (item.spec_title ? "|" : "") + item.unit_title : ""}}</view>
					<view class="add-box">
						<input class="price-input" 
							@focus="inputPriceFocus"
							@click="inputPriceFocus"
							@blur="onBlurHandler($event,item)"
							:value="item.price_0" 
						    :disabled="!limitChangePrice"
							type="number"></input>
						<text class="x-txt">x</text>
						<uniNumberBox 
							@eventChange="eventChange"
							@numberFocus="numberFocus"
							:value="item.number"
							:step="item.num_step"
							:num_p="item.num_p"
							:index="index"
							:min="item.num_min"></uniNumberBox>
					</view>
				</view>
				<view class="info-more">
					<view class="more-icon" @click="onInfoMore(item)">
						<image src="../../static/images/c-more.png"></image>
					</view>
				</view>
				
			</view>
			<view class="remrk-txt">备注：{{item.txt?item.txt:"暂无备注"}}</view>
			<activeMenu
			    class="active-menu"
				v-show="item.showMenu"
				:index="index"
				@action="action"></activeMenu>
		</view>
	</view>
</template>

<script>
	import staticConst from "../../js/const/StaticConst.js";
	import uniNumberBox from "../comm/uni-number-box.vue";
	import activeMenu from "../comm/ActiveMenu.vue";
	import https from "../../js/https/Https.js";
	import lang from "../../js/conf/Lang.js";
	import util from "../../js/util/Util.js";
	
	let time = new Date().getTime(); //处理点击事件重叠
	
	export default
	{
		props:["list","limitChangePrice"],
		components:{uniNumberBox,activeMenu},
		data()
		{
			return{
				goodsImg:staticConst.GOOD_IMG,
				curIndex:-1,
				curItem:null,
				showMenuItem : null,
				customerId:"",
				notSaleTxt:lang.notSaleTxt,
			}
		},
		methods:
		{
			eventChange(data)
			{
				time = new Date().getTime();
				let item = this.list[data.index];
				let temp = JSON.parse(JSON.stringify(item));
				temp.number = data.number;
				this.saveCart(temp);
			},
			
			onBlurHandler(event,item)
			{
				console.log(event.detail.value,item)
				item.price_0 = event.detail.value;
				this.saveCart(item);
			},
			
			inputPriceFocus()
			{
				time = new Date().getTime();
			},
			
			numberFocus()
			{
				time = new Date().getTime();
			},
			
			/***重置****/
			reset()
			{
				this.curIndex = -1;
				this.closeMenu();
				this.curItem = null;
				this.showMenuItem = null;
			},
			
			/****点击列表元素****/
			clickItem(item,index)
			{
				let now = new Date().getTime();
				if(now - time < 200)
				{
					return;
				}
				this.closeMenu();
				if(this.curIndex == index)return;
				this.curIndex = index;
				this.curItem = item;
				this.$emit("editCartInfo",this.curItem);
				console.log(item);
			},
			
			/****关闭菜单****/
			closeMenu()
			{
				if(this.showMenuItem)
					this.showMenuItem.showMenu = false;
			},
			
			/***点击显示或关闭菜单***/
			onInfoMore(item)
			{
				time = new Date().getTime();
				this.closeMenu();
				item.showMenu = !item.showMenu;
				this.showMenuItem = item;
			},
			
			/***菜单操作***/
			action(act,index)
			{
				time = new Date().getTime();
				this.showMenuItem.showMenu = false;
				let item = this.list[index];
				let temp = JSON.parse(JSON.stringify(item));
				if(act == 2)//复制
				{
					temp.id = "";
					this.saveCart(temp);
				}
				else if(act == 3)//移除
				{
					this.removeCartItem(temp);
				}
			},
			
			/***删除某个sku***/
			removeCartItem(item)
			{
				let that = this;
				let data = {};
				data.title = lang.deleTitTxt;
				data.content = lang.receiptAct.deleContexTxt;
				data.showCancel = true;
				lang.showWin(data,callBack);
				function callBack(res)
				{
					if(res.confirm)
					{
						item.number = 0;
						that.saveCart(item);
					}
				}
			},
			
			changCustomer(id)
			{
				this.customerId = id;
				if(this.list && this.list.length > 0)
					this.saveCart(this.list);
			},
			
			/****扫码枪加购产品，只有无关联的菜可以加购*****/
			scanGunSaveCart(gdInfo,step)
			{
				let that = this;
				let param = {};
				if(this.list && this.list.length > 0)
				{
					let obj = checkGds(gdInfo.id);
					console.log("11111");
					if(obj)
					{
						console.log("22222");
						param.type = 1; //开单类型1销售单；2退货单，加购产品时可不传，本参可单独传值
						param.customerid = this.customerId;
						param.gdid = gdInfo.id;  //准必填，产品id，只是改type 或 customerid 时本参不用传
						param.txt = "";
						obj.number = obj.number + step;
						let sku = this.getSkuArr(obj);
						param.spec_unit_ls = [];
						param.spec_unit_ls.push(sku);
					}
					else
					{
						console.log("33333");
						param = setParam();
					}
				}
				else
				{
					param = setParam();
				}
				
				https.saveCart(param,back);
				function back(data)
				{
					if(!data)return;
					if(data.status == 1)
					{
						that.$emit("saveCart");
					}
				}
				
				function setParam()
				{
					let data = {};
					data.customerid = that.customerId;
					data.gdid = gdInfo.id;
					data.type = 1;
					data.txt = "";
					data.spec_unit_ls = [];
					let num  = util.getInt(gdInfo.buymin);
					let temp = {};
					temp.discount_r = 100;
					temp.id = "";
					temp.number = num;
					temp.price = gdInfo.price;
					temp.price_0 = gdInfo.price;
					temp.price_i = gdInfo.price_i;
					temp.randstr =  util.random6Str();
					temp.spec_dir = "";
					temp.specid = 0;
					temp.txt = "";
					temp.unitid = 0;
					data.spec_unit_ls.push(temp);
					return data;
				}
				
				function checkGds(id)
				{
					console.log("id====",id);
					console.log(that.list);
					let len = that.list.length;
					for(let i = 0; i<len; i++)
					{
						let obj = that.list[i];
						if(id == obj.gdid)
						{
							return obj;
						}
					}
					return null;
				}
				
			},
			
			/***sku数据****/
			getSkuArr(sku)
			{
				let suObj = {};
				if(sku.id == "")
				{
					suObj.id = sku.id;
					suObj.randstr = util.random6Str();
				}
				else
				{
					suObj.id = sku.id;
					suObj.randstr = "";
				}
				suObj.spec_dir = sku.spec_dir;
				suObj.specid = sku.specid;
				suObj.unitid = sku.unitid;
				suObj.price_i = sku.price_i;
				
				suObj.price = sku.price;
				suObj.price_0 = sku.price_0;
				suObj.discount_r = sku.discount_r;
				suObj.number = sku.number;
				suObj.txt = sku.txt;
				return suObj;
			},
			
			/****提交到购物车**empty:1清除； type: 1销售单；2退货单***/
			saveCart(item,empty,type)
			{
				let that = this;
				let param = {};
				if(!empty)
				{
					if(!type) //销售单
					{
						let arr  = [];
						param.type = 1; //开单类型1销售单；2退货单，加购产品时可不传，本参可单独传值
						param.customerid = this.customerId;
						if(item.constructor == Object)
						{
							param.gdid = item.gdid;  //准必填，产品id，只是改type 或 customerid 时本参不用传135260972808623963
							param.txt = item.txt;
							let suObj = this.getSkuArr(item);
							arr.push(suObj);
						}
						else if(item.constructor == Array) //切换客户,重新加购物车
						{
							for(let i = 0; i<item.length; i++)
							{
								let suObj = this.getSkuArr(item[i]);
								arr.push(suObj);
							}
						}
						param.spec_unit_ls = arr;
					}
					else 
					{
						param.type = type; //切换销售/退货单
						param.customerid = this.customerId;
					}
				}
				else //清空购物车
				{
					param.empty = empty; //放弃开单
				}
				https.saveCart(param,back);
				function back(data)
				{
					if(!data)return;
					if(data.status == 1)
					{
						that.$emit("saveCart");
					}
				}
			},
			
			/******扫码枪加购******/
			
		},
	}
</script>

<style lang="scss">
	.content
	{
		padding: 10px 0;
		font-size: 14px;
		.item
		{
			position: relative;
			border-bottom: 1px #EFEFEF solid;
			cursor: pointer;
			.item-info
			{
				position: relative;
				display: flex;
				align-items: center;
				padding: 10px 20px;
				width: calc(100% - 40px);
				background: none;
				.img-box
				{
					width: 95px;
					height: 95px;
					border-radius: 4px;
					overflow: hidden;
					cursor: pointer;
					position: relative;
					.img
					{
						width: 100%;
						height: 100%;
					}
					
					.not-sale-txt
					{
						width: 100%;
						font-size: 14px;
						text-align: center;
						line-height: 20px;
						background-color: #3388FF;
						color: #fff;
						position: absolute;
						bottom: 0;
					}
				}
				
				.gd-info
				{
					padding-left: 10px;	
					.gd-tit
					{
						font-size: 17px;
					}
					.gd-s-u
					{
						color: #999;
						.g-s-u-r
						{
							color:#00C569 ;
							padding-left: 5px;
							padding-right: 10px;
						}
						.g-s-u-p
						{
							color:#F04848 ;
							padding-left: 5px;
							padding-right: 10px;
						}
					}
					.add-box
					{
						display: flex;
						padding-top: 8px;
						.price-input
						{
							border: 1px #ddd solid;
							background-color: #fff;
							border-radius: 4px;
							text-align: center;
							font-size: 14px;
							padding: 2px 0 ;
							width: 130px;
							color: #333;
						}
						.x-txt
						{
							padding: 0 10px;
							color: #999;
						}
					}
				}
				
				.info-more
				{
					margin-left: auto;
					padding-right: 10px;
					padding-left: 10px;
					.more-icon
					{
						width: 24px;
						height: 24px;
						cursor: pointer;
						padding: 3px;
						image
						{
							width: 100%;
							height: 100%;
						}
					}
					
					.more-icon:hover
					{
						background-color: #EEE;
						opacity: .9;
					}
					.more-icon:active
					{
						background-color: #DDD;
						opacity: .8;
					}
				}
			}
			.remrk-txt
			{
				padding-left: 20px;
				padding-bottom: 10px;
				color: #999;
			}
			.active-menu
			{
				z-index: 9999;
			}
			
		}
		.item:last-child
		{
			border-bottom: none;
			
		}
		.item:hover {
			&.active {
				background: #F8F8F8;
			}
			background:#F8F8F8;
		}
		.active {
			background: #F8F8F8;
		}
	}
</style>
